<template>
  <view class="cart">
    <!-- 1 列表 -->
    <view class="cart-list">
      <view class="cart-item" v-for="(item,index) in cartList" :key="item.goods_id">
        <!-- 1 复选框 -->
        <view class="goods-chk">
          <u-checkbox
            :value="item.checked"
            shape="circle"
            active-color="red"
            @change="handleItemCheck(index)"
          ></u-checkbox>
        </view>
        <!-- 2 图片 -->
        <view class="goods-img">
          <u-image
            width="191rpx"
            height="191rpx"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <!-- 3 信息 -->
        <view class="goods-info">
          <!-- 名称 -->
          <view class="goods-name u-line-2">{{item.goods_name}}</view>
          <!-- 价格和数量 -->
          <view class="goods-price-num">
            <view class="goods-price">￥{{item.goods_price}}</view>
            <view class="goods-num-tool">
              <view class="num-btn" @click="handleNumUpdate(-1,index)">-</view>
              <view class="goods-vnum">{{item.nums}}</view>
              <view class="num-btn" @click="handleNumUpdate(1,index)">+</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 2 统计 -->
    <view class="statistics">
      <view class="all-chk">
        <u-checkbox
          :value="allChecked"
          shape="circle"
          active-color="red"
          @change="handleAllCheck"
        >全选</u-checkbox>
      </view>
      <view class="all-price">
        合计: <text>￥{{checkedPrice}}</text>
      </view>        
      <view class="all-count">
        <u-button
          type="error"
          shape="circle"
          @click="handleGoPay"
        >去结算({{checkedCount}})</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {mapState,mapMutations,mapGetters} from "vuex"
export default {
  computed:{
    ...mapState({
      cartList:(state)=>state.cart.cartList
    }),
    ...mapGetters("cart",["checkedPrice","checkedCount"]),
    // 全选
    allChecked(){
      // 要求购物车数组 每一种商品都选中 全选=选中
      // 特别注意：为空时，为默认选中状态
      return this.cartList.length&&this.cartList.every((item)=>item.checked)
    },
    // // 统计 购买的数量
    // checkedCount(){
    //   let count=0;
    //   this.cartList.forEach((item)=>{
    //     if(item.checked){
    //       count+=item.nums
    //     }
    //   });
    //   return count
    // },
    // // 统计 购买的总金额
    // checkedPrice(){
    //   let price=0;
    //   this.cartList.forEach((item)=>{
    //     if(item.checked){
    //       price+=item.nums*item.goods_price
    //     }
    //   });
    //   return price
    // }
  },
  methods: {
    ...mapMutations(["cart/cartGoodsChecked","cart/cartGoodsNumUpdate","cart/cartGoodsRemove","cart/cartAllGoodsChecked"]),
    // 商品选中功能
    handleItemCheck(index){
      // console.log(index);
      // 数据要 存放在vuex中！！！！
      // mutations来修改！！！
      this["cart/cartGoodsChecked"]({index})
    },
    // 点击数量编辑按钮 - || +
    // async handleNumUpdate(unit,index){
    handleNumUpdate(unit,index){
      // this["cart/cartGoodsNumUpdate"]({unit,index})
      // 判断用户是否要删除 当前的数量和点击"-""
      if(this.cartList[index].nums===1&&unit===-1){
        // 弹出 确认框 是否想要删除
        // const [err, result] = await uni.showModal({
        uni.showModal({
          title: '提示',
          content: '你是否想要删除',
          showCancel: true,
          cancelText: '取消',
          cancelColor: '#000000',
          confirmText: '确定',
          confirmColor: '#3CC51F',
          success: (result) => {
            if (result.confirm) {
              // 想要删除
              // console.log("想要删除");
              this['cart/cartGoodsRemove']({index})
            }else{
              // console.log("不删除");
            }
          }
        });
          
      }else{
        this["cart/cartGoodsNumUpdate"]({unit,index})
      }
    },
    // 点击全选
    handleAllCheck(){
      // 1 获取当前的全选按钮 选中按钮=》取反
      const allChecked=!this.allChecked
      // 2 mutations把全选状态 传递过去 挨个修改数组的元素checked
  this["cart/cartAllGoodsChecked"]({checked:allChecked})
    },
    // 结算
    handleGoPay(){
    // 判断当前有没有商品选中
    if(this.checkedCount===0){
      // 没有选中
      uni.showToast({
        title: '你还没有选中商品',
        icon: 'none',
      });        
    }else{
      // 跳转页面
      uni.navigateTo({url:"/pages/pay/pay"})
    }
    }
  },
};
</script>


<style lang="scss">
.cart {
  padding-bottom: 111rpx;
  .cart-list {
    .cart-item {
      display: flex;
      padding: 10rpx;
      border-bottom: 1rpx solid #ccc;
      .goods-chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .goods-img {
        flex: 2;

        display: flex;
        align-items: center;
        justify-content: center;
      }

      .goods-info {
        color: #666;
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods-name {
        }

        .goods-price-num {
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: $themeColor;
          }

          .goods-num-tool {
            width: 140rpx;
            height: 40rpx;

            display: flex;
            justify-content: space-between;
            .num-btn {
              border: 1rpx solid #ccc;
              border-radius: 50%;
              width: 40rpx;
              height: 40rpx;
              text-align: center;
              line-height: 40rpx;
            }

            .goods-vnum {
            }
          }
        }
      }
    }
  }
  // 结算
  .statistics {
    display: flex;
    background-color: #fff;
    position: fixed;
    width: 100%;
    height: 111rpx;
    bottom: 0;
    left: 0;
    border-top: 1rpx solid #ccc;
    align-items: center;
    padding: 0 15rpx;
    font-size: 21rpx;
  .all-chk {
    
  }

  .all-price {
    flex: 1;
    color: #666;
    font-size: 26rpx;
    text {
      color: $themeColor;
      font-size: 30rpx;
    }
  }

  .all-count {
    
  }
  }
}
</style>